<template>
    <div class="container">
        <el-row class="main-row">
            <el-col :span="4" class="menu-col">
                <div class="menu-header">
                    <img src="../assets/ded8c421c1cdef98124473d00f71046.png" class="menu-logo">
                    <h5 class="menu-title">迈迪科后台管理</h5>
                </div>

                <el-menu
                    active-text-color="#ffd04b"
                    background-color="#545c64"
                    class="el-menu-vertical-demo"
                    default-active="2"
                    text-color="#fff"
                    @open="handleOpen"
                    @close="handleClose"
                    style="height: calc(100vh - 60px); overflow: auto;"
                >
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon><location /></el-icon>
                            <span @click="findAlldevice()">产品管理</span>
                        </template>
                        <el-menu-item-group title="Group One">
                            <el-menu-item index="1-1" @click="serchType(1)">影像类</el-menu-item>
                            <el-menu-item index="1-2" @click="serchType(2)">康复类</el-menu-item>
                            <el-menu-item index="1-3" @click="serchType(3)">实验室类</el-menu-item>
                            <el-menu-item index="1-4" @click="serchType(4)">家庭类</el-menu-item>
                            <el-menu-item index="1-5" @click="serchType(5)">检测类</el-menu-item>
                            <el-menu-item index="1-6" @click="serchType(6)">治疗类</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-menu-item index="2">
                        <el-icon><icon-menu /></el-icon>
                        <span @click="order()">订单详情</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <el-icon><document /></el-icon>
                        <span @click="store()">库存统计分析</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <el-icon><setting /></el-icon>
                        <span>Navigator Four</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="20" class="content-col">
                <Manageproduce v-if="showProduce" :devices="devices"></Manageproduce>
                <echartsgraph v-if="showGraph" :width="'1000px'" :height="'700px'" :array="datagraph"></echartsgraph>
                <orderdetail v-if="showOrder" :orders="orders" ></orderdetail>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import axios from "axios";
import Manageproduce from "../components/manageproduce.vue";
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue';
import Echartsgraph from "../components/echartsgraph.vue";
import Orderdetail from "../components/orderdetail.vue";

interface Device {
    id: number;
    deviceName: string;
    deviceType: string;
    deviceStatus: number;
    devicePrice: string;
    buyer: string | null;
    dateAdded: string;
}

interface Order{
    id:number;
    buyer:string;
    deviceName:string;
    count:number;
    totalPrice:string
}



const devices = ref<Device[]>([]);

const orders = ref<Order[]>([]);


const TypeForm = [
    "影像类",
    "康复类",
    "实验室类",
    "家庭类",
    "检测类",
    "治疗类"
];

let showProduce = ref(false)

let showGraph = ref(false)

let showOrder = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};

const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};

const order = ()=>{

    showProduce.value = false
    showGraph.value = false
    showOrder.value = true
    axios.get("http://localhost:9091/order/find").then(res=>{
        console.log(res)
        orders.value = res.data.data as Order[];
    })


}

let datagraph = [
    [0,0,0],
    [0,0,0],
    [0,0,0],
    [0,0,0],
    [0,0,0],
    [0,0,0]
]

const store = ()=>{
    axios.get("http://localhost:9091/devices/graphdata").then(res=>{
        // console.log(res.data.data)
        datagraph = res.data.data;
        console.log(datagraph)
    })

    showOrder.value = false
    showProduce.value = false
    showGraph.value = true

}
const findAlldevice = () => {

    showOrder.value = false
    showGraph.value = false
    showProduce.value = true
    axios.get("http://localhost:9091/devices/findAlldevice").then((res) => {
        devices.value = res.data.data as Device[];
        console.log(devices.value);

    }).catch((error) => {
        console.error('There was an error!', error);
    });
    // showProduce = true
};

const params = {
    type: ""
};

const serchType = (num: number) => {
    console.log(TypeForm[num-1]);
    params.type = TypeForm[num-1];
    axios.get("http://localhost:9091/devices/serach", {
        params: params
    }).then(res => {
        devices.value = res.data.data as Device[];
        console.log(res);
    });
};
</script>

<style>
.container {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.main-row {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.menu-col {
    height: 100%;
    background-color: #cb4939;
    overflow: hidden;
}

.menu-header {
    display: flex;
    align-items: center;
    padding: 20px;
}

.menu-logo {
    width: 50px;
    height: 40px;
}

.menu-title {
    font-size: 1.1em;
    margin-left: 10px;
}

.content-col {
    flex: 1;
    margin-top: 80px;
    margin-left: 20px;
    overflow: auto;
}
</style>
